<template>
  <div>
    <el-row :gutter="20" class="containerBox">
      <el-col :span="24" style="text-align: left">
        <el-form :inline="true" :model="search" class="demo-form-inline" size="mini">
          <el-form-item label="所属平台:">
            <el-tooltip class="item" effect="dark"  placement="top">
              <div slot="content" v-html="selectContent"></div>
            <el-select
              v-model="search.platformNameId"
              placeholder="请选择平台"
              filterable
              multiple
              clearable
              @change="selectChange"
              collapse-tags>
              <el-option
                v-for="item in platformList"
                :key="item.platformId"
                :label="item.platformName"
                :value="item.platformId">
              </el-option>
            </el-select>
            </el-tooltip>
          </el-form-item>
          <!--          <el-form-item label="操作系统:">-->
          <!--            <el-checkbox-group v-model="search.operaSys">-->
          <!--              <el-checkbox label="Android"></el-checkbox>-->
          <!--              <el-checkbox label="IOS"></el-checkbox>-->
          <!--            </el-checkbox-group>-->
          <!--          </el-form-item>-->
          <el-form-item label="日期:">
            <el-date-picker
              class="searchDom"
              value-format="yyyy-MM-dd"
              v-model="search.dateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData" v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="">
      <el-col :span="24">
                <el-table
                  v-if="isShowTab"
                  size="mini"
                  :data="tableData"
                  row-key="id"
                  border
                  lazy
                  :load="load"
                  height="500"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  style="width: 100%">
                  <el-table-column
                    v-for="(item,index) in tableColumn"
                    align="center"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :fixed="item.fixed"
                    :width="item.width"
                  >
                    <template slot-scope="scope">
                      <myRender
                        v-if="item.render"
                        :row="scope.row"
                        :render="item.render">
                      </myRender>
                      <span v-else>
                     {{scope.row[item.prop]}}
                   </span>
                    </template>
                  </el-table-column>
                </el-table>

        <!--          :defaultExpandedRowKeys="[]"-->
        <!--          -->
<!--        <a-table-->
<!--          @change="handleTableChange"-->
<!--          @expandedRowsChange="getExpendRow"-->
<!--          :expandedRowKeys="expandedRowKeys"-->
<!--          style="word-break: break-all"-->
<!--          :columns="antTableColumn"-->
<!--          :dataSource="antTableData"-->
<!--          :scroll="setTableScoll()"-->
<!--          size="small"-->
<!--          :pagination="pagination"-->
<!--          bordered-->
<!--          :rowKey="setRowKey"/>-->
      </el-col>
    </el-row>
    <!--    <el-row class="containerBox" style="margin-top: 40px">-->
    <!--      <el-col :span="24" style="text-align: right">-->
    <!--        <el-pagination-->
    <!--          @size-change="handleSizeChange"-->
    <!--          @current-change="handleCurrentChange"-->
    <!--          :current-page="search.pageNumber"-->
    <!--          :page-sizes="[10, 200, 300, 400]"-->
    <!--          :page-size="search.pageSize"-->
    <!--          layout="total, sizes, prev, pager, next, jumper"-->
    <!--          :total="400">-->
    <!--        </el-pagination>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <tableDialog
      @diaTableClosed="closeDiaTable"
      :isShow="showTableDia"
      :tableColumn="diaTable"
      :diaTitle="diaTitleText"
      :tableData="diaTabData"/>
  </div>
</template>
<script>
  import myRender from '@/components/tableRender';
  import tableDialog from '@/components/tableDialog';
  // import {Table} from 'ant-design-vue';
  // import * as types from "@/store/type";
  // import {mapState, mapActions, mapMutations} from 'vuex'

  import {saleAlsApi, getPlatfromList,saleAlsApiLoadChild} from '@/api';

  const tableCloumnWidth = 100;
  const fixedWidthPlus = 40;
  const dateNow = moment().format('YYYY-MM-DD');
  export default {
    name: 'saleAls',
    data() {
      return {
        isFirstOpenPage:1,
        fullscreenLoading: false,
        showTableDia: false,
        isShowTab: false,
        diaTable: [],
        diaTabData: [],
        selectContent:'',
        diaTitleText: '',
        search: {
          dateTime: [dateNow,dateNow],
          platformNameId: [],
          pageNumber: 1,
          pageSize: 10,
        },
        platformList: [],
        tableData: [],
        pagination:{
          showTotal:total => `共 ${total} 条数据`,
          current:1,
        },
        expandedRowKeys: [],
        antTableData: [],
        antTableColumn: [
          {
            dataIndex: 'timeStr',
            key: 'timeStr',
            title: '日期',
            fixed: 'left',
            width: tableCloumnWidth + fixedWidthPlus,
            align: 'center'
          },

          {
            dataIndex: 'articleAddLimit',
            key: 'articleAddLimit',
            title: '文章加分上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'shareCountFault',
            key: 'shareCountFault',
            title: '分享次数错误',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleCookieDayLimit',
            key: 'singleCookieDayLimit',
            title: '单cookie每天加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {dataIndex: 'notWechat', key: 'notWechat', title: '非微信', width: tableCloumnWidth, align: 'center'},
          {dataIndex: 'honestyPoint', key: 'honestyPoint', title: '诚信分', width: tableCloumnWidth, align: 'center'},
          {dataIndex: 'vipIp', key: 'vipIp', title: '会员IP', width: tableCloumnWidth, align: 'center'},
          {dataIndex: 'garbageIp', key: 'garbageIp', title: '垃圾IP', width: tableCloumnWidth, align: 'center'},
          {
            dataIndex: 'sameIpSingleUserLimit',
            key: 'sameIpSingleUserLimit',
            title: '同一IP单用户上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'sameIpSingleDayLimit',
            key: 'sameIpSingleDayLimit',
            title: '同一IP单天上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'sameUserSingleDayLimit',
            key: 'sameUserSingleDayLimit',
            title: '同一用户单天加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'historyAdClick',
            key: 'historyAdClick',
            title: '历史广告点击',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'userOwnDiscount',
            key: 'userOwnDiscount',
            title: '用户自身折扣',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'secondShareLow',
            key: 'secondShareLow',
            title: '二次分享过低',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalClickLt100',
            key: 'totalClickLt100',
            title: '总点击数小于100',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalClickIn100And300',
            key: 'totalClickIn100And300',
            title: '总点击数大于100小于300',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalClickIn300And500',
            key: 'totalClickIn300And500',
            title: '总点击数大于300小于500',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalClickIn500And1000',
            key: 'totalClickIn500And1000',
            title: '总点击数大于500小于1000',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalClickGt1000',
            key: 'totalClickGt1000',
            title: '总点击数大于1000',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleIp24HourLimit',
            key: 'singleIp24HourLimit',
            title: '单IP24小时加分上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleUv24HourLimit',
            key: 'singleUv24HourLimit',
            title: '单UV24小时加分上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleUserDayLimit',
            key: 'singleUserDayLimit',
            title: '单用户每天加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleUserVipLimit',
            key: 'singleUserVipLimit',
            title: '单用户会员加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'singleUserVipGradeLimit',
            key: 'singleUserVipGradeLimit',
            title: '单用户会员等级加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },

          {
            dataIndex: 'cookie1Discount',
            key: 'cookie1Discount',
            title: 'cookie1次折扣',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'cookie2Discount',
            key: 'cookie2Discount',
            title: 'cookie2次折扣',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'cookieGe3Discount',
            key: 'cookieGe3Discount',
            title: 'cookie3次及已上折扣',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'userAgentFault',
            key: 'userAgentFault',
            title: 'USER-AGENT错误',
            width: tableCloumnWidth,
            align: 'center'
          },
          {dataIndex: 'ipadDiscount', key: 'ipadDiscount', title: 'IPAD折扣', width: tableCloumnWidth, align: 'center'},
          {
            dataIndex: 'iphoneDiscount',
            key: 'iphoneDiscount',
            title: 'IPHONE折扣',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'gradeNullOrIllegalIp',
            key: 'gradeNullOrIllegalIp',
            title: '等级配置为空或者IP不合法',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'highPriceArticleCountLimit',
            key: 'highPriceArticleCountLimit',
            title: '单日单高价文加分次数上限',
            width: tableCloumnWidth,
            align: 'center'
          },
          {
            dataIndex: 'totalAddPointsCount',
            key: 'totalAddPointsCount',
            title: '总加分数',
            width: tableCloumnWidth,
            align: 'center'
          },
          {dataIndex: 'validAddPointsCount', key: 'validAddPointsCount', title: '有效加分数', align: 'center'},

          {
            dataIndex: 'platformName',
            key: 'platformName',
            title: '平台名称',
            width: tableCloumnWidth + fixedWidthPlus,
            fixed: 'right',
            align: 'center'
          },
        ],
        tableColumn: [
          {prop: 'timeStr', label: '日期', fixed: 'left', width: '160',},
          {prop: 'articleAddLimit', label: '文章加分上限',},
          {prop: 'shareCountFault', label: '分享次数错误'},
          {prop: 'singleCookieDayLimit', label: '单cookie每天加分次数上限'},
          {prop: 'notWechat', label: '非微信'},
          {prop: 'honestyPoint', label: '诚信分'},
          {prop: 'vipIp', label: '会员IP',},
          {prop: 'garbageIp', label: '垃圾IP',},
          {prop: 'sameIpSingleUserLimit', label: '同一IP单用户上限',},
          {prop: 'sameIpSingleDayLimit', label: '同一IP单天上限',},
          {prop: 'sameUserSingleDayLimit', label: '同一用户单天加分次数上限',},
          {prop: 'historyAdClick', label: '历史广告点击',},
          {prop: 'userOwnDiscount', label: '用户自身折扣',},
          {prop: 'secondShareLow', label: '二次分享过低',},
          {prop: 'totalClickLt100', label: '总点击数小于100',},
          {prop: 'totalClickIn100And300', label: '总点击数大于100小于300',},
          {prop: 'totalClickIn300And500', label: '总点击数大于300小于500',},
          {prop: 'totalClickIn500And1000', label: '总点击数大于500小于1000',},
          {prop: 'totalClickGt1000', label: '总点击数大于1000',},
          {prop: 'singleIp24HourLimit', label: '单IP24小时加分上限',},
          {prop: 'singleUv24HourLimit', label: '单UV24小时加分上限',},
          {prop: 'singleUserDayLimit', label: '单用户每天加分次数上限',},
          {prop: 'singleUserVipLimit', label: '单用户会员加分次数上限',},
          {prop: 'singleUserVipGradeLimit', label: '单用户会员等级加分次数上限',},
          {prop: 'cookie1Discount', label: 'cookie1次折扣',},
          {prop: 'cookie2Discount', label: 'cookie2次折扣',},
          {prop: 'cookieGe3Discount', label: 'cookie3次及已上折扣',},
          {prop: 'userAgentFault', label: 'USER-AGENT错误',},
          {prop: 'ipadDiscount', label: 'IPAD折扣',},
          {prop: 'iphoneDiscount', label: 'IPHONE折扣',},
          {prop: 'gradeNullOrIllegalIp', label: '等级配置为空或者IP不合法',},
          {prop: 'highPriceArticleCountLimit', label: '单日单高价文加分次数上限',},
          {prop: 'totalAddPointsCount', label: '总加分数',},
          {prop: 'validAddPointsCount', label: '有效加分数',},
          {prop: 'platformName', label: '平台名称', width: '160', fixed: 'right',},
         ]
      }
    },
    components: {
      myRender,
      tableDialog,
      // ATable:antd.Table,
    },
    created() {
      this.getTableData();
    },
    mounted() {

    },
    // computed: mapState({
    //   // platformList: state => state.allPlatfromSelect,
    // }),
    methods: {
      // ...mapActions({
      //     "getTable": types.GET_PARAMS_TO_REQUEST_SALE_TABLE,
      //     "getPlatromList": types.GET_ALL_PLATFORMLIST_PARAMS
      //   }),
      getSelect() {
        return getPlatfromList().then(({data}) => {
          this.platformList = data.platformList;
        });
      },
      handleTableChange(pagination){
        // console.log(pagination);
        this.pagination.current = pagination.current;
      },
      setTableScoll() {
        var x = this.antTableColumn.length * tableCloumnWidth + fixedWidthPlus * 2;
        // console.log(x);
        return {x: x, y: 390}
      },
      setRowKey(record) {
        // console.log(record);
        return record.id;
      },
      getExpendRow(rows) {
        // console.log(rows);
        this.expandedRowKeys = rows;
      },
      async getTableData() {
        // this.fullscreenLoading = true;
        var _this = this;
        var  lastSelect = localStorage.getItem('saleAls:platformIds');
        _this.isFirstOpenPage++;
        this.isShowTab = false;
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.expandedRowKeys = [];
        this.pagination.current = 1;
        await this.getSelect();
        if(_this.isFirstOpenPage == 2){
          if(lastSelect!="undefined"){
            // console.log(lastSelect);
            if(lastSelect){
              lastSelect = lastSelect.split(",");
            }else{
              lastSelect = [];
            }
            this.search.platformNameId = lastSelect;
          }
          _this.selectChange();
        }
        var dateRange = this.search.dateTime;
        var params = {
          beginDate: '',
          endDate: '',
          platformIds: this.search.platformNameId
        };
        localStorage.setItem('saleAls:platformIds',_this.search.platformNameId);
        if (dateRange) {
          params.beginDate = dateRange[0];
          params.endDate = dateRange[1];
        }
        // this.getTable(params).then((data) => {
        //   console.log(this.$store.state.saleTableData);
        //   this.fullscreenLoading = false;
        // });
        saleAlsApi(params).then(({data}) => {
          this.tableData = data.result;
          // this.antTableData = data.result;
          this.isShowTab = true;
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loading.close();
          });
          // this.fullscreenLoading = false;
        });
      },
      selectChange(){
        var selectContent = '';
        const selectList = this.platformList;
        const data = this.search.platformNameId;
        selectList.map((item,index) => {
          if(data.indexOf(item.platformId) != -1){
            selectContent = selectContent + `${item.platformName}<br />`
          }
        });
        // console.log(selectContent);
        this.selectContent = selectContent || "暂无数据";
      },
      async load(tree, treeNode, resolve) {
        // console.log(tree);
        // console.log(treeNode);
        var params = {
          platformId: tree.platformId,
          id: tree.id,
          dateStr:tree.timeStr,
        };
        const data = await saleAlsApiLoadChild(params).then(({data}) => {
          return data.result;
        });
        // console.log(data);
        // console.log(1);
        resolve(data);
      },
      getPlatformList() {

      },
      handleSizeChange(val) {

      },
      handleCurrentChange(val) {

      },
    }
  }
</script>
<style lang="less" scoped>
  .containerBox {
    /*margin-top: 20px;*/
  }
</style>
